/**
 * @author kobe
 * @date   16/06/08
 */


//可以与指点合并
(function (lf, r) {
    var RC = r.createClass,
        doAction = lf.bridgeJs.doAction,
        viewCode = lf.finger.viewCode,
        ajax = lf.utils.ajax,
        openNativeView = lf.bridgeJs.openNativeView;
    
    const NATIVE = 'native',
        H5 = 'h5';
    
    
    var setChoose = [
        {
            icon: 'icon-wodepaibanbiao',
            text: '我的排班',
            type: H5, //跳native
            url: 'schedule.html',
        },
        // {
        //     icon: 'icon-erweima',
        //     text: '应用二维码',
        //     type: H5, //跳native
        //     url: 'app-scan.html',
        // },
        {
            icon: 'setting',
            text: '设置',
            type: NATIVE, //跳native
            viewCode: viewCode.meSetting,
        },
    
    ]
    
    var Header = RC({
        componentDidMount: function () {
            var toMeProfile = r.findDOMNode(this.refs.toMeProfile);
            $(toMeProfile).on('tap', function () {
                doAction('me-profile.html', '个人资料')
            })
        },
        render: function () {
            // console.log(this.props.user);
            return (
                <header className="header mui-table-view mui-table-view-chevron">
                    <a href="javascript:;" className="mui-navigate-right choose-line" id="toMeProfile"
                       ref="toMeProfile">
                        <div className="header-info">
                            <div className="avatar">
                                <img src={this.props.user.portraitUrl || '../public/images/finger/me-head.png'}/>
                            </div>
                            <p className="name">{this.props.user.name}</p>
                        </div>
                    </a>
                </header>
            )
        }
        
    });
    
    // var ChooseLink = RC({
    //     render: function () {
    //         var me = this;
    //         var link = this.props.info.map(function (info) {
    //             return (
    //                 <LinkBox info={info} user={me.props.user}/>
    //             )
    //         })
    //         return (
    //             <ul className="mui-table-view mui-table-view-chevron choose-link">
    //                 {link}
    //             </ul>
    //         )
    //     }
    // })
    
    var LinkBox = RC({
        clickFn: function () {
            
            var info = this.props.info,
                url = info.url,
                title = info.text,
                type = info.type,
                viewCode = info.viewCode,
                env = lf.utils.getEnv(),
                systemFlag = lf.utils.getSys(),
                ua = navigator.userAgent;
            
            if (env == 'app' && systemFlag == 'IOS' && ua.indexOf('Version') == -1) {
                openNativeView(viewCode);
            }
            else {
                if (type == NATIVE) {
                    openNativeView(viewCode);
                } else {
                    doAction(url, title);
                }
            }
            
        },
        componentDidMount: function () {
            r.findDOMNode(this.refs.list).addEventListener('tap', function () {
                this.clickFn();
            }.bind(this))
        },
        render: function () {
            var info = this.props.info;
            var userType = this.props.userType;
            
            if (!(userType == 2 && info.display == 'residents-hide')) {
                return (
                    <li className="mui-table-view-cell" ref="list">
                        <a href="javascript:;" className="mui-navigate-right">
                            <i className={"iconfont "+info.icon}></i>
                            <span className="text">{info.text}</span>
                        </a>
                    </li>
                )
            } else {
                return (
                    <li ref="list"></li>
                )
            }
            
        }
    })
    
    var Body = RC({
        getInitialState: function () {
            return (
            {
                user: this.props.user,
                name: '',
            }
            )
        },
        componentWillMount: function () {
            var me = this;
            lf.appJs.refresh(
                me.updateUser
            )
        },
        updateUser(){
            var me = this;
            ajax({
                type: "POST",
                data: {
                    staffId: me.props.user.id
                },
                success: function (data) {
                    //成功
                    if (data.code == '200') {
                        var data = data.data;
                        me.setState({
                            user: data
                        });
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, lf.api.staffInfo);
        },
        render: function () {
            var me = this;
            var link = setChoose.map(function (info) {
                return (
                    <LinkBox info={info} user={me.props.user}/>
                )
            })
            
            return (
                <div className="my-index">
                    <Header user={this.state.user}/>
                    <ul className="mui-table-view mui-table-view-chevron choose-link">
                        {link}
                    </ul>
                </div>
            )
            
            //  <ChooseLink info={setChoose} user={this.props.user}/>
        }
    });
    
    lf.appJs.getUser(function (user) {
        r.render(
            <Body user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background-color', '#e9e9e9');
            }
        )
    });
})(liefeng, React)